import { Steps as AntSteps } from 'antd';
import { useConfig } from '../ConfigProvider';
import { StepsComponent, StepProps } from './interface';
import './style.less';

const Steps: StepsComponent = (props) => {
  const {
    antNative,
    processIconSize = false,
    showProcessEllipsis = false,
    showWaitDot = false,
    verticalAlign = false,
    items,
    children,
    ...restProps
  } = props;
  const { antNative: globalAntNative } = useConfig();

  // 检查当前进行中的步骤是否有自定义图标
  const currentStepHasIcon = items?.some((item: StepProps, index: number) => 
    index === restProps.current && item.icon
  );

  // 只有在没有自定义图标时才显示省略号
  const shouldShowEllipsis = showProcessEllipsis && !currentStepHasIcon;

  if (antNative || globalAntNative) {
    return <AntSteps {...restProps} items={items}>{children}</AntSteps>;
  }

  return (
    <AntSteps
      {...restProps}
      items={items}
      className={`xwd-steps ${
        processIconSize ? 'xwd-steps-process-icon-size' : ''
      } ${shouldShowEllipsis ? 'xwd-steps-process-ellipsis' : ''} ${
        showWaitDot ? 'xwd-steps-wait-dot' : ''
      } ${verticalAlign ? 'xwd-steps-vertical-align' : ''}`}
    >
      {children}
    </AntSteps>
  );
};

export default Steps;
